<script setup>
  import { ref, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { delayApi } from '@/apis/task'

  // 1. 接收传递的参数
  const id = ref('') // 任务的id
  const planDepartureTime = ref('') // 计划提货的时间
  const startTime = ref('') // 计划提货的时间(除年月日)
  onLoad((params) => {
    // console.log(params)
    id.value = params.id
    planDepartureTime.value = params.planDepartureTime
    const [, time] = planDepartureTime.value.split(' ')
    startTime.value = time
  })

  // 2. 延迟的时间
  const delayTime = ref('')
  const onDelayTimeChange = (e) => {
    // 处理时间的格式输出
    const [date] = planDepartureTime.value.split(' ')
    delayTime.value = `${date} ${e.detail.value}`
    // console.log(delayTime.value)
  }
  // 判断延时时间是否在2小时内(在: true, 不在: false)
  const delayTimeValid = computed(() => {
    const startTime = new Date(planDepartureTime.value)
    const endTime = new Date(delayTime.value)
    //  0 < 延时的时间 - 计划提货的时间  <= 7200 * 1000
    return endTime - startTime > 0 && endTime - startTime <= 7200 * 1000
  })

  // 3. 延迟的原因
  const delayReason = ref('')
  const wordCount = computed(() => delayReason.value.length)
  const delayResonValid = computed(() => {
    return wordCount.value > 0 && wordCount.value <= 50
  })

  // 4. 点击提交
  // 4.1 处理按钮是否可用
  const submitValid = computed(() => {
    return !delayTimeValid.value || !delayResonValid.value
  })
  // 4.2 提交数据
  const onSubmitForm = async () => {
    const formData = {
      id: id.value,
      delayTime: delayTime.value,
      delayReason: delayReason.value,
    }
    const { code } = await delayApi(formData)
    if (code !== 200) return uni.utils.toast('延迟提货失败~')
    uni.reLaunch({
      url: '/pages/task/index',
    })
  }
</script>

<template>
  <view class="page-container">
    <uni-list :border="false">
      <uni-list-item
        title="原定时间 "
        showArrow
        :right-text="planDepartureTime"
      />
      <uni-list-item title="延迟时间" showArrow>
        <template v-slot:footer>
          <picker
            class="time-picker"
            mode="time"
            :start="startTime"
            @change="onDelayTimeChange"
          >
            <text v-if="!delayTime">不可超过2个小时</text>
            <text v-else :class="{ error: !delayTimeValid }"
              >{{ delayTime }}:00</text
            >
          </picker>
        </template>
      </uni-list-item>
      <uni-list-item direction="column">
        <template v-slot:body>
          <view class="textarea-wrapper">
            <textarea
              v-model="delayReason"
              class="textarea"
              placeholder-style="color: #818181"
              placeholder="请输入延迟提货原因"
            ></textarea>
            <text class="words-count" :class="{ error: wordCount > 50 }"
              >{{ wordCount }}/50</text
            >
          </view>
        </template>
      </uni-list-item>
      <uni-list-item :border="false">
        <template v-slot:body>
          <button :disabled="submitValid" class="button" @click="onSubmitForm">
            提交
          </button>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
